<template>
    <div>
        <el-dialog title="详情" :visible.sync="dialogVisible" :close-on-click-modal="false" @open="btnDisabled=false"
                   @close="handleClose">
            <el-form label-width="100px" :model="form" ref="form" :rules="rules" class="dlg-form"
                     label-position="right">
                <el-form-item label="菜单编码:" prop="menuCode">
                    <el-input v-model="form.menuCode" :disabled="disabled"/>
                </el-form-item>
                <el-form-item label="菜单名称:" prop="menuName">
                    <el-input v-model="form.menuName" :disabled="disabled"/>
                </el-form-item>
                <el-form-item label="菜单链接:" prop="menuUrl">
                    <el-input v-model="form.menuUrl" :disabled="!form.menuId.startsWith('new')" />
                </el-form-item>
                <el-form-item label="icon:" prop="iconCls">
                    <el-input v-model="form.iconCls" :disabled="disabled"/>
                </el-form-item>
                <el-form-item label="路由地址:" prop="routerPath">
                    <el-input v-model="form.routerPath" :disabled="disabled"/>
                </el-form-item>
                <el-form-item label="所属系统" prop="sysCode">
                    <sys-select v-model="form.sysCode" :disabled="disabled"/>
                </el-form-item>
                <el-form-item label="资源id:">
                    <el-input v-model="form.resourceId" disabled/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <template v-if="disabled">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </template>
                <template v-else>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSubmit('form')" :disabled="btnDisabled">确 定</el-button>
                </template>
            </div>
        </el-dialog>

    </div>
</template>

<script>

  import SysSelect from '../../../components/sys/SysSelect'
  export default {
    name: 'menu-dialog',
    components: {SysSelect},
    props: {
      pk: {
        type: String,
        required: true
      },
      value: {
        type: Boolean,
        required: true
      },
      disabled: {
        type: Boolean,
        required: true
      },
      parentId: {
        type: String,
        required: false
      }
    },
    watch: {
      value: function () {
        console.log('watch')
        if (!this.value) return
        this.dialogVisible = this.value
        if (this.pk) {//修改
          this.form = {
            menuId: this.pk
          }
          this.getData()
        } else {//新增
          this.handleNew()
        }
      }
    },
    data () {
      return {
        dialogVisible: false,
        btnDisabled: false,
        data: [],
        form: {
          sysCode:'',
          menuId:''
        },
        rules: {
          menuCode: [
            {required: true, message: '请输入菜单编码', trigger: 'blur'},
          ],
          menuName: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'},
          ],
          sysCode: [
            {required: true, message: '请选择所属系统', trigger: 'change'},
          ]
        }
      }
    },
    created () {
      if (this.form.menuId)
        this.getData()
    },
    methods: {
      getData () {
        let self = this
        self.$axios
          .post('menuAction/findById', {
            id: self.form.menuId
          })
          .then(res => {
            self.form = res.data
          })
      },
      handleNew () {
        let self = this
        self.$axios
          .post('commonRest/getNewId')
          .then(res => {
            self.form = {
              menuId: 'new' + res.data,
              parentId: self.parentId,
              sysCode:'',
              menuUrl:'',
              treeLevel: self.parentId==null?1:2,
              isLeaf: 1
            }
          })
      },
      handleClose (value) {
        if (typeof (value) == 'undefined')
          value = false
        this.$emit('input', false)
        this.$emit('close', value)
      },
      handleSubmit (formName) {
        let self = this
        self.btnDisabled = true
        delete self.form.children
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios
              .post('menuAction/save', self.form)
              .then(res => {
                if (res.data.result) {
                  self.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  self.dialogVisible = false
                  self.handleClose(true)
                } else {
                  self.btnDisabled = false
                  self.$message.error(res.data.msg)
                }
              })
          } else {
            console.log('error submit!!')
            self.btnDisabled = false
            return false
          }
        })
      }

    }
  }
</script>
